<template>
<view>
    <!-- <navigation :showIcon="true" title="客户资料"></navigation> -->
    <!-- 导航栏 -->
    <view class="nav">
        <van-nav-bar title="客户资料" left-text="返回" left-arrow @click-left="goBack()" />
    </view>
    <view class="main-box">
        <van-field v-model="detilData.realname" name="客户姓名" label="客户姓名" placeholder="待填写" input-align="right" />
        <van-field disabled v-model="detilData.source_text" name="客资来源" label="客资来源" placeholder="待填写" input-align="right" />
        <van-field disabled v-model="contactTitle" name="联系类型" label="联系类型" placeholder="待填写" input-align="right" />
        <van-field disabled v-model="detilData.mobile" name="联系电话" label="联系电话" placeholder="待填写" input-align="right" />
        <!-- 桌数 -->
        <van-row>
            <van-col span="17">
                <van-field type="digit" v-model="detilData.banquet_size" label="桌数" placeholder="待填写" input-align="right" />
            </van-col>
            <van-col span="2">
                <view class="centerLine">-</view>
            </van-col>
            <van-col span="5">
                <van-field type="digit" v-model="detilData.banquet_size_end" label="" placeholder="待填写" />
            </van-col>
        </van-row>
        <view class="form_line">
            <view class="line_bottom"></view>
        </view>
        <!-- 预算 -->
        <van-row>
            <van-col span="17">
                <van-field type="digit" v-model="detilData.budget" label="预算" placeholder="待填写" input-align="right" />
            </van-col>
            <van-col span="2">
                <view class="centerLine">-</view>
            </van-col>
            <van-col span="5">
                <van-field type="digit" v-model="detilData.budget_end" label="" placeholder="待填写" />
            </van-col>
        </van-row>
        <view class="form_line">
            <view class="line_bottom"></view>
        </view>
        <!-- 微信号 -->
        <van-field v-model="detilData.wechat1" name="微信号1" label="微信号1" placeholder="待填写" input-align="right" />
        <van-field v-model="detilData.wechat2" name="微信号2" label="微信号2" placeholder="待填写" input-align="right" />
        <!-- 咨询区域 -->
        <van-cell>
            <template #title>
                <span>咨询区域</span>
            </template>
            <template #default>
                <span @click="showTwoPicker_linkage">请选择咨询区域</span>
            </template>
            <template #label v-if="detilData.zone">
                <van-tag style="margin: 0 5px 5px 0;" v-for="(item,index) in detilData.zone" :key="index" closeable size="medium" type="primary" @close="deletZone(index)">
                    {{item}}
                </van-tag>
            </template>
        </van-cell>
        <wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
        <!--咨询酒店  -->
        <van-cell>
            <template #title>
                <span>咨询酒店</span>
            </template>
            <template #default>
                <span @click="showFilter=true">请选择咨询酒店</span>
            </template>
            <template #label v-if="detilData.hotel_text">
                <van-tag style="margin: 0 5px 5px 0;" v-for="(item,index) in detilData.hotel_text" :key="index" closeable size="medium" type="primary" @close="deletHotel(index)">
                    {{item}}
                </van-tag>
            </template>
        </van-cell>
        <!-- 选择酒店 搜索筛选弹层 -->
        <filterMask ref="filterMask" :parent="_self" :showFilter="showFilter" :dataList="dataList" :filterType="filterType" :isCustomerEdit="true"></filterMask>
        <!-- 备注 -->
        <van-field v-model="detilData.remark" rows="2" autosize label="备注" type="textarea" placeholder="待输入" input-align="right" />
    </view>
    <van-goods-action>
        <van-goods-action-icon />
        <van-goods-action-button text="提交" @click="editDataFn" color="#406CEB" />
        <van-goods-action-icon />
    </van-goods-action>
</view>
</template>

<script>
import dictionary from '@/utils/dictionary.js';
import wzpPicker from "@/component/wzp-picker/wzpPicker.vue";
import navigation from '@/component/navigation.vue';
import selectBox from '@/component/selectBox.vue';
import filterMask from "@/component/filter-mask/filter-mask.vue";
import sun from '@/utils/sun.js'
export default {
    components: {
        navigation,
        selectBox,
        wzpPicker,
        filterMask
    },
    data() {
        let accountPickerList = dictionary.getPicker('account');
        return {
            options: '',
            detilData: '',
            selectBox: '',
            region: '', //地区
            regionArry: [
                [],
                []
            ],
            timesIndex: [0, 0],
            pickerValue: "",
            mode: "",
            pickerList: [],
            defaultIndex: [],
            contactTitle: '',
            filterType: "hotel",
            dataList: [], //传给筛选弹层的数据
            showFilter: false,
        };
    },
    beforeMount() {
        this.dictionary = dictionary;
    },
    onLoad(options) {
        this.options = options;
        this.getData({
            id: options.id
        })
        this.address();
        this.getHotelList();
    },
    methods: {
        // 获取酒店列表
        getHotelList() {
            let that = this;
            sun.request({
                url: "/api/dictionary.picker/hotel",
                token: true,
                data: {},
                success(res) {
                    if (res.code == 200) {
                        that.dataList = res.data.hotelList;
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~"
                    });
                }
            });
        },
        // 删除区域
        deletZone(index) {
            this.detilData.zone.splice(index, 1);
        },
        // 删除咨询酒店
        deletHotel(index) {
            this.detilData.hotel_text.splice(index, 1);
        },
        // 双列联动初始化
        showTwoPicker_linkage() {
            this.mode = 'two_linkage';
            this.pickerList = this.region;
            this.defaultIndex = [0, 0];
            this.$refs.wzpPicker.showPicker();
        },
        onConfirm(e) {
            if (!this.pickerList[e[0]].children[e[1]]) {
                this.pickerValue = this.pickerList[e[0]].title
            } else {
                this.pickerValue = this.pickerList[e[0]].title + " " + this.pickerList[e[0]].children[e[1]].title;
            }
            this.timesIndex = e;
            this.detilData.zone.push(this.pickerList[e[0]].children[e[1]].title)
        },
        // onBackPress() {
        // // 	if (this.$refs.wzpPicker.pickerShow) {
        // // 		this.$refs.wzpPicker.closePicker();
        // // 		return true;
        // // 	}
        // // },
        //所选酒店
        gotoHotelList() {
            uni.navigateTo({
                url: "../hotelList/hotelList"
            })
        },
        getData(e) {
            let that = this
            sun.request({
                url: "/h5/customer.customer/member",
                showLoading: true,
                token: true,
                data: {
                    id: e.id
                },
                success(res) {
                    if (res.code == 200) {
                        that.detilData = res.data.customer;
                        that.contactTitle = that.detilData.contact_type == 1 ? '电话' : '微信';
                        that.detilData.hotel_text = that.detilData.hotel_text.split(',');
                        that.detilData.zone = that.detilData.zone.split(',');
                    }
                    if (that.detilData.hotel_text[0] == '') {
                        that.detilData.hotel_text = [];
                    }
                    if (that.detilData.zone[0] == '') {
                        that.detilData.zone = [];
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })

        },
        editDataFn(e) {
            let that = this
            sun.request({
                url: "/h5/customer.customer/doEdit",
                showLoading: true,
                token: true,
                data: {
                    id: that.options.id,
                    realname: that.detilData.realname,
                    wechat1: that.detilData.wechat1,
                    wechat2: that.detilData.wechat2,
                    budget: that.detilData.budget,
                    budget_end: that.detilData.budget_end,
                    banquet_size: that.detilData.banquet_size,
                    banquet_size_end: that.detilData.banquet_size_end,
                    zone: that.detilData.zone.filter(function (s) {
                        return s && s.trim(); //过滤空值
                    }),
                    remark: that.detilData.remark,
                    // hotel_id:that.detilData.hotel_id,
                    hotel_text: that.detilData.hotel_text.filter(function (s) {
                        return s && s.trim(); //过滤空值
                    }),

                },
                success(res) {
                    if (res.code == 200) {
                        uni.navigateBack({
                            delta: 1
                        })
                        uni.showToast({
                            icon: "none",
                            title: res.msg
                        })
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })
        },
        address() {
            let that = this
            sun.request({
                url: "/h5/dictionary.region/getRegion",
                showLoading: true,
                token: true,
                data: {},
                success(res) {
                    if (res.code == 200) {
                        that.region = res.data.region;
                        that.region.map((item, index) => {
                            that.regionArry[0].push(item)
                            if (index == 0) {
                                that.regionArry[1] = item.items
                            }
                        })
                    }
                },
                fail(e) {

                }
            })
        },
        //输入酒店
        selectholet(e) {
            console.log(111)
            this.selectBox = e.detail.value;
        },
        //选中酒店
        clickHolet(e) {
            this.detilData.hotel_text.push(e.title)
            this.selectBox = ''
        },
        //删除酒店
        deleteHolte(indexs) {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定删除该条信息嘛?',
                success: function (res) {
                    if (res.confirm) {
                        let arr = that.detilData.hotel_text
                        arr.splice(indexs, 1)
                        that.detilData.hotel_text = arr
                    } else if (res.cancel) {}
                }
            });

        },
        //删除地区
        deleteAddress(index) {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定删除该条信息嘛?',
                success: function (res) {
                    if (res.confirm) {
                        let arrs = that.detilData.zone
                        arrs.splice(index, 1)
                        that.detilData.zone = arrs
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });

        },
        //地址
        columnchange(e) {
            let column = e.detail.column
            let value = e.detail.value
            this.region.map((item, index) => {
                if (column == 0) {
                    if (value == index) {
                        this.regionArry[1] = item.items
                    }
                }
            })
        },
    }
}
</script>

<style lang="less">
// 为不影响公共样式
page {
    padding-top: 0 !important;
    padding-bottom: 120upx;
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	z-index: 999;
}

.main-box {
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

.titles {
    width: 100%;
    height: 32px;
    background: rgba(245, 246, 246, 1);
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(30, 30, 30, 1);
    line-height: 32px;
    padding-left: 25px;
    box-sizing: border-box;
    margin-top: 22px;
}

.list_box {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;

    .border {
        width: 100%;
        border-bottom: 1px solid rgba(235, 237, 240, 0.5);
        padding: 10px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        text {
            font-size: 26upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #646566;
        }

        input {
            font-size: 26upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(30, 30, 30, 1);
        }

        .uni-input-placeholder {
            color: #c8c9cc;
        }
    }

}

.hotel_name {
    font-size: 26upx;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, .1);
    margin-bottom: 10upx;
    padding: 3upx 10upx;
    border-radius: 10upx;

    text {
        color: rgba(0, 0, 0, .6);
    }
}

.save_btn {
    width: 100%;
    height: 73upx;
    margin-top: 100upx;

    button {
        width: 686upx;
        height: 100%;
        background: rgba(64, 108, 235, 1);
        ;
        border-radius: 36upx;
        line-height: 73upx;
        text-align: center;
        color: #ffffff;
    }

}

.centerLine {
    width: 100%;
    height: 100%;
    padding-top: 6px;
    box-sizing: border-box;
}

.van-goods-action {
    padding-bottom: 12px;
    box-sizing: border-box;
}

.form_line {
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;

    .line_bottom {
        width: 100%;
        border-bottom: 1px solid #ebedf0;
        transform: scaleY(0.5)
    }
}
</style>
